<template>
  <div>
    <van-search
        v-model="value"
        shape="round"
        background="#0057b7"
        placeholder="显卡"
        @blur="fun(value)"
    ></van-search>
    <!-- 搜索发现 -->
    <div class="faxian">
        <p>搜索发现</p>
        <div class="box" >
            <div class="box1" v-for="(v,index) in arr" :key="index">
                {{ v }}
            </div>
        </div>
    </div>
    <!-- 搜索推荐 -->
    <div class="center">
        <p>搜索推荐</p>
        <div class="text" v-for="(v,index) in img" :key="index">
            <img :src="v" alt="">
            <p>{{ text[index] }}</p>
            <span>热</span>
        </div>

    </div>
    <img src="https://static.asus.com.cn/store/20221124/11091699991005.jpg" class="bottom" @click="dianji">
    <div class="kong"></div>


  </div>
</template>

<script>
export default {
    data() {
        return {
            value: "",
            arr: ["无畏", "天选3"],
            img: [],
            text:[]
        }
    },
    mounted() {
        this.$http({
            url:"http://localhost:3000/HotList"
        }).then(res => {
            this.img=res.data[0].data.img
            this.text=res.data[0].data.text
        })
    },
    methods: {
        fun(value) {
            if (value != ""&&this.arr.length<=5) {
                this.arr.push(value)
                this.value=""
            } else if (this.arr.length > 5) {
                this.value=""
            }
           
        },
        dianji() {
            this.$router.push({
                path:"/home"
            }).catch(err=>err)
        }
    }
}
</script>

<style lang="scss" scoped>
.center{
    width: 95vw;
    margin: auto;
    .text{
        height: 67.5px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 3vw 0;
        img{
            height: 67.5px;
        }
        p{
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
             overflow: hidden; 
             width: 65vw;
        height: 4vw;
        font-weight: normal;
        border-bottom: none;
        }
        span{
            width: 5vw;
            height: 5vw;
            font-size: 2vw;
            color: white;
            background-color: red ;
            margin-right: 1vw;
            text-align: center;
            border-radius: 2vw;
        }
    }
    p{
        display: block;
        width: 18vw;
        height: 6vw;
        border-bottom: 3px solid #1869c2;
        font-weight: 600;
        padding-bottom: 2vw;

    }
}
    .faxian{
        p{
            text-indent: 3.2vw;
            font-weight: 600;
        }
        .box{
            display: flex;
            flex-wrap: wrap;
          .box1{
            height: 4vw;
            padding: 2vw;
            margin: 2vw 4vw;
            border: 1px solid red ;
            font-size: 3vw;
            border-radius: 5vw;
          }
        }
    }
    .bottom{
        width: 100vw;
    }
    .kong{
        height: 16vw;
    }
</style>